<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue练习1</title>
     <!-- 导入Vue -->
     <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="header">
        <h1>{{message}}</h1>
        <a v-bind:href="url">
            <p>{{text}}</p>
        </a>        
    </div>

    <div id="vbind">        
        <input :placeholder="text" v-bind:value="value">
        <button>{{message}}</button>
    </div>

    <div id="vmodel">        
        
        <button @click="add">{{message}}</button>
        <input type="text" :placeholder="text" v-model:value="value">
        <p>{{value}}</p>    
    </div>
</body>

<script>
    const headerFun = {
        data:function(){
            return{
                message:'网页标题',
                text:'百度一下',
                url:'https://www.baidu.com/'
            }
        }
    }
    const header = Vue.createApp(headerFun)
    header.mount('#header')

    const inputFun = {
        data:function(){
            return{
                message:'数量+1',
                text:'请输入想要的数目',
                value:'0'
            }
        }
    }
    const vbind = Vue.createApp(inputFun)
    vbind.mount('#vbind')

    const vModelFun = {
        data:function(){
            return{
                message:'数量+1',
                text:'请输入想要的数目',
                value:0
            }
        },
        methods:{
            add:function(){
                this.value = this.value + 1
            }
        }
        
    }
    const vmodel = Vue.createApp(vModelFun)
    vmodel.mount('#vmodel')

</script>
</html>